<template>
  <div class="tablewrap">
    <el-table
      :ref="refName"
      v-bind="$attrs"
      v-loading="isLoading"
      element-loading-text="加载中..."
      :data="dataSource"
      size="small"
      :highlight-current-row="false"
      :row-style="marginAuto"
      :header-cell-style="headClass"
      style="coll"
      :cell-style="{ background: '#fff', fontSize: '14px' }"
      @select="select"
      @select-all="selectAll"
      @row-click="rowClick"
      @row-contextmenu="contextmenu"
      @selection-change="handleSelectionChange"
      :default-expand-all="true"
      :show-header="showHeader"
    >
      <!-- 头部 -->
      <slot name="prepend" />
      <!-- 是否需要序号 -->
      <!-- <el-table-column v-if="type == 0" type="index" width="50" align="center" label="序号"></el-table-column> -->
      <!-- 是否支持多选 -->
      <!-- :selectable="canSelectCondition" -->
      <el-table-column
        v-if="type == 2"
        type="selection"
        width="60"
      >
      <template slot-scope="scope">
        <el-checkbox :disabled="scope.row.disabled || canSelectCondition(scope.row)" @change="val => handleCheckboxChange(val, scope.row)"></el-checkbox>  
      </template>  
    </el-table-column>

      <!--  :filters="item.filters"
          :filter-method="item.filterMethod" :filter-multiple="item.filterMultiple" -->

      <!-- 循环 （表头每一列）-->
      <template>
        <el-table-column
          v-for="(item, i) in dataConfig"
          :key="i + 'config'"
          :type="item.type"
          v-bind="item"
          :formatter="item.formatterHandle"
          min-width="100"
          :width="item.width"
          :show-overflow-tooltip="overflowTooltip(item)"
          :column-key="item.columnKey"
          :render-header="item.renderHeader"
        >
          <template #header>
            <slot :name="item.prop + 'Header'"></slot>
            <span v-if="!item.selectOption">{{ item.label }}</span>
          </template>

          <template slot-scope="scope">
            <slot :scope="scope" :name="item.prop">{{
              scope.row[item.prop]
            }}</slot>
          </template>
        </el-table-column>
      </template>

      <!-- <slot name="append" /> -->
    </el-table>

    <div class="page_line" v-if="total > 10">
      <!-- <div class="left">
        <el-checkbox
        :value="selectBottom"
        label="全选"
        name="type"
        @change="toggleSelection"
        />
        
      </div> -->
      <div class="left">
        <slot name="bottom-btn"></slot>
      </div>

      <el-pagination
        v-if="total > 10 && showPagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 30, 50, 100, 1000]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>



</template>

<script>
export default {
  props: {
    type: {
      type: [Number, Boolean], //0是序号 1是正常 2是多选框, 3是隐藏
      default: 1,
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    refName: {
      type: String,
    },
    dataSource: {
      type: Array,
      required: true,
    },
    dataConfig: {
      type: Array,
      required: true,
    },

    edit: {
      type: Boolean,
      default: false,
    },
    del: {
      type: Boolean,
      default: false,
    },
    cat: {
      type: Boolean,
      default: false,
    },
    authEdit: {
      type: Boolean,
      default: false,
    },
    reset: {
      type: Boolean,
      default: false,
    },
    btnWidth: {
      type: Number,
      default: 150,
    },
    btnFixed: {
      type: [String, Boolean],
      default: false,
    },
    total: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    pageNum: {
      type: Number,
      default: 1,
    },
    defaultAllSelected: {
      type: Boolean,
      default: false,
    },
    showPagination: {
      type: Boolean,
      default: true,
    },
    showHeader: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      pageSizeTable: 10,
      pageNumTable: 1,
      selectBottom: false,
      selectionItems: []
    };
  },
  watch: {
    dataSource() {
      if (this.defaultAllSelected) {
        this.$refs[this.refName].toggleAllSelection();
      }
    },
  },
  methods: {
    // 独立全选
    toggleSelection() {
      this.selectBottom = !this.selectBottom
      this.selectBottom ? this.$refs[this.refName].toggleAllSelection() : this.$refs[this.refName].clearSelection()
      // this.select = selectBottom
    },
    handleCheckboxChange(val, row) {
      if (val) this.selectionItems.push(row)
      if (!val) this.selectionItems = this.selectionItems.filter(m => m.userBoxId != row.userBoxId)

      this.dataSource.map(data => {
        if (this.selectionItems.length> 0 && this.selectionItems.filter(m => m?.userBoxSubBean?.mainId).length > 0 && !data?.userBoxSubBean?.mainId) {
          data.disabled = true;
        } else if (this.selectionItems.length > 0 && this.selectionItems.filter(m => m?.userBoxSubBean?.mainId).length == 0 && data?.userBoxSubBean?.mainId) {
          data.disabled = true;
        } else {
          data.disabled = false;
          this.canSelectCondition(data)
        }
      })
      this.$forceUpdate()
      this.handleSelectionChange(this.selectionItems)
    },
    // 判断checkBox 是否可被选
    canSelectCondition(row) {
      // 有容器档案窍  和  云窍及无容器档案窍
      if (this.refName == "applyReadList") {
        // 判断 窍是否可 发起申请调阅
        let returnValue;

        if (row?.boxStatus == 2 && row?.orderStatus == null) {
          returnValue = false;
        } else {
          returnValue = true;
        }
        return returnValue;
      } else if (this.refName == "applyBackList") {
        // 判断 窍是否可 发起申请回库
        let returnValue;

        if (row?.orderStatus == null) {
          returnValue = false;
        } else {
          returnValue = true;
        }
        return returnValue;
      } else {
        return false;
      }
    },
    overflowTooltip(item) {
      if (item.showTooltip == false) {
        return item.showTooltip;
      } else {
        return true;
      }
    },
    marginAuto(row, rowIndex) {
      row;
      rowIndex;

      return {
        "margin-top": "20px",
      };
    },
    headClass() {
      return "background:#F3F4F6;color:#333;fontSize:14px";
    },
    // 当选中项发生变化时
    handleSelectionChange(val) {
      // 当选中项发生变化时， 判断当前是否可以
      // this.selectionItems = val
      this.$emit("selectionChange", val);
    },
    // select 手动勾选触发
    select(selection, row) {
      this.$emit("select", [selection, row]);
    },
    // 触发全选 事件
    selectAll(selection) {
      this.$emit("selectAll", selection);
    },
    // filters 筛选条件变化时
    filterChange(filters) {
      this.$emit("filterChange", filters);
    },
    // 某一行被鼠标右击
    contextmenu(row, column, event) {
      event.preventDefault();
      // this.$refs[this.refName].toggleRowSelection(row, true);
      this.$emit("contextmenu", [row, column, event]);
    },
    // 某一行点击
    rowClick(row, column) {
      // 切换当前行的 选中状态

      // this.$refs[this.refName].toggleRowSelection(row, true);
      this.$emit("rowClick", [row, column]);
    },
    // 每页展示
    handleSizeChange(val) {
      this.pageSizeTable = val;

      let querystr = {
        pageNum: this.pageNumTable,
        pageSize: this.pageSizeTable,
      };
      // 将参数结果传值
      this.$emit("pageChange", querystr);
      // this.handleSelectionChange([])
    },
    // 页数变化
    handleCurrentChange(val) {
      this.pageNumTable = val;
      let querystr = {
        pageNum: this.pageNumTable,
        pageSize: this.pageSizeTable,
      };
      // 将参数结果传值
      this.$emit("pageChange", querystr);
    },

    // handle
  },
};
</script>
<style lang="scss" scoped>
.tablewrap {
  width: 100%;
  margin-top: 10px;
}
.page_line {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    width: 180px;
    margin-top: 20px;
    line-height: 32px;
  }
}
.el-tooltip__popper {
  /* width: 80%; 修改宽度 */
  background: #000 !important; /*背景色  !important优先级*/
  opacity: 0.5 !important; /*背景色透明度*/
  color: #ffffff !important; /*字体颜色*/
  max-width: 50%;
  /* width: auto; */
  width: auto;
}
.el-pagination {
  margin-top: 20px;
}
</style>
<style lang="scss">
.el-table__header-wrapper  .el-checkbox{
	display:none
}
</style>